<template>
  <div>
      <el-form :inline="true" :model="query" class="query-form" size="small">
          <el-form-item>
              <el-button type="primary" icon="el-icon-edit" @click.native="handleForm(null,null)">添加</el-button>
          </el-form-item>
          <!--  <el-form-item class="query-form-item">
                <el-tag>创建时间</el-tag>
            </el-form-item>-->

          <el-form-item>
              <el-input v-model="query.warehousename" placeholder="请输入ID或者仓库名称" clearable></el-input>
          </el-form-item>

          <el-form-item>
              <el-button type="primary" icon="el-icon-refresh" @click="onRest"></el-button>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          </el-form-item>

      </el-form>


    <!-- <el-scrollbar class="table-scrollbar" wrap-style="overflow-x: hidden;"> -->
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="list"
      :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column
        label="选择"
        prop="warehouseid"
        type="selection"
        :show-overflow-tooltip="true"
        width="50"
        align="center"
      />

        <el-table-column label="序号" align="center" width="50" prop="warehouseid">
        </el-table-column>
        <el-table-column label="模板名称" align="center" width="500" prop="warehousename">
        </el-table-column>
        <el-table-column label="地址" align="center" width="500" prop="warehouseaddress">
        </el-table-column>


      <el-table-column  label="操作" align="center" >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click.native="handleForm(scope.$index,scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click.native="handleDel(scope.row.warehouseid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="left-container">
      <el-button type="danger" size="small" @click="delGroup()">删除已选</el-button>
      <transition name="el-fade-in-linear">
        <el-button size="small" @click="toggleSelection()" v-show="cancelToggle">取消选择</el-button>
      </transition>
    </div>
      <el-pagination
          class="pagination-container"
          background
          :page-size="query.pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total,sizes,prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 50]"
          :total="totalNumber"
      ></el-pagination>
    <!-- </el-scrollbar> -->
      <!--表单-->
      <el-dialog
          :title="formMap[formName]"
          :visible.sync="formVisible"
          width="800px"
          top="5vh"
          @close='closeDialog'
          v-dialogDrag
      >
          <el-form :model="formData" :rules="formRules" ref="dataForm" >
              <el-form-item label="添加编辑仓库:" prop="warehousename" >
                  <el-input v-model="formData.warehousename" placeholder="请输入仓库名称" clearable></el-input>
              </el-form-item>

             <el-form-item label="省:" prop="warehouseprovince"  style="width:30%;display: inline-block;margin-left: 20px" >
                  <el-select v-model="formData.warehouseprovince" label="省" placeholder="请选择省" @change="province($event)"
                             clearable>
                    <el-option
                          v-for="item in plist"
                          :key="item.areaid"
                          :label="item.areaname"
                          :value="item.areaid">
                      </el-option>
                  </el-select>

              </el-form-item>
              <el-form-item label="市:" prop="warehousecity"  style="width:30%;display: inline-block;margin-left: 20px">
                  <el-select v-model="formData.warehousecity" label="市" placeholder="请选择市" @change="city($event)" @visible-change="$forceUpdate()"
                             clearable>
                      <el-option label="全部" value="0"></el-option>
                   <el-option
                          v-for="item in citylist"
                          :key="item.areaid"
                          :label="item.areaname"
                          :value="item.areaid">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="区:" prop="warehousearea"  style="width:30%;display: inline-block;margin-left: 20px">
                  <el-select v-model="formData.warehousearea" label="区" placeholder="请选择区" @change="toarea($event)" @visible-change="$forceUpdate()"
                      clearable>
                      <el-option label="全部" value="0"></el-option>
                     <el-option
                          v-for="item in area"
                          :key="item.areaid"
                          :label="item.areaname"
                          :value="item.areaid">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="详细地址:" prop="warehouseaddress" >
                  <el-input v-model="formData.warehouseaddress" placeholder="请输入仓库名称" clearable></el-input>
              </el-form-item>
              <el-form-item label="经度:" prop="longitude" >
                  <el-input v-model="formData.longitude" placeholder="请输入经度" clearable></el-input>
              </el-form-item>
              <el-form-item label="纬度:" prop="latitude" >
                  <el-input v-model="formData.latitude" placeholder="请输入纬度" clearable></el-input>
              </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">

              <el-button @click.native="cancle()">取消</el-button>
              <el-button type="primary" @click.native="formSubmit()" :loading="formLoading">提交</el-button>
          </div>
      </el-dialog>

  </div>
</template>

<script>
import { getList, addBusWarehouse, editBusWarehous,delBusWarehous,getsysArea,getZuoBiao} from "../../api/warehouse/warehouse";
import { BASE_URL } from "../../config/app";
import Tinymce from "../../components/Tinymce/index.vue";
const formJson = {
    warehouseid: "",//id
    warehousename: "",//仓库名
    warehouseprovince: "",//省

    warehousecity: "",//市
    warehousearea: "",//区
    warehouseaddress: "",//详细地址
    longitude: "",//经纬度
    latitude: "",//经纬度

};
export default {
    data() {
        return {
            cancelToggle: false,
            createTime: [],
            query: {
                warehouseid: "",
                warehousename: "",//仓库名
                currentPage: 1,
                pageSize: 10
            },
            list: [],
            plist:[],//区域列表
            citylist: [],//市
            area: [],//区
            provinceid: '',
            cityid: '',
            areaid: '',
            warehousearea:'',

            totalNumber: 0,
            loading: true,
            index: null,
            formName: null,
            formMap: {
                add: "添加",
                edit: "编辑"
            },
            formLoading: false,
            formVisible: false,
            editshow:false,
            formData: formJson,
            formRules: {
                warehousename: {
                    required: true,
                    message: "请输入名称",
                    trigger: "blur"
                },
                warehouseaddress: {
                    required: true,
                    message: "请选择详细地址",
                    trigger: "blur"
                }
            },
            multipleSelection: [], //多选集合
            uploadAction: BASE_URL + "/systemSetup/import",

        };
    },
    components: {
        Tinymce
    },
    methods: {

        //关闭弹框的事件
        closeDialog(){
            this.formData.warehouseprovince= "",//省
            this.formData.warehousecity="";
            this.formData.warehousearea="";
            this.plist=[],//区域列表
            this.citylist= [],//市
            this.area =  [];
        },

        cancle(){

            this.formVisible=false;
           // this.loading=false;
        },

        handleAvatarSuccess(response) {
            this.loading.close();
            if (response.code) {
                this.$message.error(response.message);
                return false;
            }
            this.$message.success("导入成功");
            this.getList();
        },
        handleAvatarError() {
            this.$message.error("上传文件出错");
        },
        dateChange(val) {
            if (val == null) {
                this.query.startTime = "";
                this.query.endTime = "";
            } else {
                this.query.startTime = val[0];
                this.query.endTime = val[1];
            }
            this.getList();
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            if (val == "") {
                this.cancelToggle = false;
                return;
            }
            this.cancelToggle = true;
        },
        delGroup() {
            var ids = this.multipleSelection.map(item => item.warehouseid).join(); //获取所有选中行的id组成的字符串，以逗号分隔
            if (ids == "") {
                this.$message({
                    message: "请先选择",
                    type: "warning"
                });
                return;
            }
            this.handleDel(ids);
        },
        onRest() {
            this.$router.push({
                path: ""
            });
            this.query = {
                currentPage: 1,
                pageSize: 10
            };
            this.createTime = [];
            this.getList();
        },
        onSubmit() {
            this.$router.push({
                path: "",
                query: this.query
            });
            this.getList();
        },
        handleCurrentChange(val) {
            this.query.currentPage = val;
            //scrollTo(0, 800);
            this.getList();
        },
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.getList();
        },
        getList() {
            this.loading = true;
            getList(this.query)
                .then(response => {
                    if (response.code) {
                        this.$message.error(response.message);
                    }
                    this.list = response.data.list || [];
                    this.totalNumber = response.data.totalNumber || 0;
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.totalNumber = 0;
                });
        },
        //省
        province(v){
         //   alert(this.formData.warehouseprovince);
            if(this.formData.warehouseprovince===""||this.formData.warehouseprovince===undefined){
                this.formData.warehousecity="";
                this.formData.warehousearea="";
                this.citylist= [],//市
                this.area =  [];
                return;
            }
           if(v==this.formData.warehouseprovince){
                this.formData.warehousecity="";
                this.formData.warehousearea="";
            }
            let pa = new URLSearchParams();
            pa.append("provinceid",this.formData.warehouseprovince)
            getsysArea(pa).then(response => {
                if (response.code) {
                    this.$message.error(response.message);
                }
                this.citylist = response.data || [];
                this.area =  [];


             /*   for (let i=0;i<this.citylist.length;i++) {
                    this.citylist[i].areaid=this.citylist[i].areaid.toString();
                }*/
            }).catch(() => {

                });

        },
        //市v
        city(v){
            if(this.formData.warehousecity===""||this.formData.warehousecity===undefined){
                this.formData.warehousearea="";
                this.area =  [];
                return;
            }

            if(this.formData.warehouseprovince==""){
                return;
            }
            if(v==this.formData.warehousecity){
                this.formData.warehousearea="";
            }
            let pa = new URLSearchParams();
            pa.append("provinceid",this.formData.warehousecity)
            getsysArea(pa).then(response => {
                if (response.code) {
                    this.$message.error(response.message);
                }

                this.area = response.data || [];
              //  this.formData.warehousearea="";
           /*     for (let i=0;i<this.area.length;i++) {
                    this.area[i].areaid=this.area[i].areaid.toString();
                }*/
            }).catch(() => {

            });
        },
        //区
        toarea(v){
           // alert(v)
            console.info(this.formData.warehousearea)
            let name =""
            for(let i=0;i<this.area.length;i++){
                if(this.area[i].areaid==v){
                    name=this.area[i].areaname;
                }
            }
          //  alert(name);
            let pa = new URLSearchParams();
            pa.append("address",name)
            getZuoBiao(pa).then(response => {
                    this.formLoading = false;
                    if (response.code) {
                        this.$message.error(response.message);
                        return false;
                    }
                let data= response.data || [];
                this.formData.longitude=data.Longitude
                this.formData.latitude=data.Latitude

                console.info(data);
            })
                .catch(() => {

                });


        },
        //获得省
        getAreaList() {

           getsysArea("").then(response => {
            if (response.code) {
                this.$message.error(response.message);
            }
            this.plist = response.data || [];
          /*     for (let i=0;i<this.plist.length;i++) {
                   this.plist[i].areaid=this.plist[i].areaid.toString();
               }*/
        })
        .catch(() => {

        });
       },

        // 隐藏表单
        hideForm() {
            // 更改值
            this.formVisible = !this.formVisible;
            // 清空表单
            this.$refs["dataForm"].resetFields();

            return true;
        },
        // 显示表单
        handleForm(index, row) {
            this.formVisible = true;
            this.formData = Object.assign({}, formJson);
            if (row !== null) {
                this.formData = Object.assign({}, row);
            }
            this.formName = "add";
            //编辑
            if (index !== null) {
                this.index = index;
                this.formName = "edit";
                this.editshow=true;
                this.province();
                this.city();

            }else {
                this.editshow=false;
                // 清空验证信息表单
                if (this.$refs["dataForm"]) {
                    this.$refs["dataForm"].clearValidate();
                }
            }
            this.getAreaList();
        },
        formSubmit() {

            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    this.formLoading = true;
                    let data = new URLSearchParams(this.formData);
                    console.info(this.formData);
                    if(this.editshow){
                       // console.info("666666");
                        editBusWarehous(data).then(response => {
                            this.formLoading = false;
                            if (response.code) {
                                this.$message.error(response.message);
                                return false;
                            }
                            this.$message.success("操作成功");
                            // 刷新表单
                            //this.$refs["dataForm"].resetFields();
                            //this.$refs.tinymce.clearContent();
                            this.formVisible = false;
                            this.query.warehousename = "";
                             this.plist=[],//区域列表
                             this.citylist= [],//市
                             this.area=[],//区
                            this.formData.warehouseprovince="";
                            this.formData.warehousecity="";
                            this.formData.warehousearea="";
                            this.getList();
                        });
                    }else {
                        addBusWarehouse(data).then(response => {
                            this.formLoading = false;
                            if (response.code) {
                                this.$message.error(response.message);
                                return false;
                            }
                            this.$message.success("操作成功");
                            // 刷新表单
                            //this.$refs["dataForm"].resetFields();
                            //this.$refs.tinymce.clearContent();
                            this.formVisible = false;
                            this.query.warehousename = "";
                            this.getList();
                        });
                    }

                }
            });
        },
        // 删除
        handleDel(ids) {
            if (ids) {
                this.$confirm("确认要删除吗?", "提示", {
                    type: "warning"
                })
                    .then(() => {
                        this.loading = true;
                        var params = new URLSearchParams();
                        params.append("ids", ids);
                        delBusWarehous(params)
                            .then(response => {
                                this.loading = false;
                                if (response.code) {
                                    this.$message.error(response.message);
                                    return false;
                                }
                                this.$message.success("删除成功");
                                // 刷新数据
                                //this.list.splice(index, 1);
                                this.getList();
                            })
                            .catch(() => {
                                this.loading = false;
                            });
                    })
                    .catch(() => {});
            }
        }
    },

    created() {
        // 将参数拷贝进查询对象
   /*     let query = this.$route.query;
        this.query = Object.assign(this.query, query);
        this.query.pageSize = parseInt(this.query.pageSize);*/
        // 加载表格数据
        this.getList();

    }
};
</script>

<style type="text/scss" lang="scss">
body {
    margin: 0;
}
</style>
